import React from 'react'
import { NavbarWrapper } from "./styleNavbar"
import { bool, string } from "prop-types"
import Icon from "@/components/icon/Icon"
import { useHistory } from 'react-router'

const Navbar = ({
    back,
    title,
    next,
    nextLink,
}) => {
    const history=useHistory()
    const leftClickHandler=()=>{
        history.goBack()
    }
    const rightClickHandler = () => {
        // http://www.baidu.com
        // history.push("/My")
        history.push(nextLink)
    }

    return (
        <NavbarWrapper>
            {
                back ? (
                    <Icon
                        name="arrowLeftLine"
                        size=".18rem"
                        click={leftClickHandler}
                    ></Icon>
                ) : (<i></i>)
            }
            {
                title ? <div>{title}</div> : <div></div>
            }
            {
                next ? <span onClick={rightClickHandler}>{next}</span> : <span></span>
            }
        </NavbarWrapper>
    );
}

Navbar.propTypes = {
    back: bool,
    title: string,
    next: string,
    nextLink: string
}

export default Navbar;